<template>
  <div>
    <div>
      <ymm-content title="用户管理">
        <template slot="toolbar">
          <ymm-toolbar @add="onAdd" @handleInput="onInput"/>
        </template>
        <template>
          <user-table :users="users" @update="onUpdate" @del="onDelete" @assign="onAssign"/>
          <ymm-pagination :total="total" @sizeChange="onSize" @numChange="onNum"/>
        </template>
      </ymm-content>
    </div>
    <user-dialog :is-show="isShow" :user="user" :is-add="isAdd" @handleSubmit="onSubmit"
                 @handleClose="user={}" @closeDialog="isShow=false"/>
    <assign-dialog :id="assignId" :assign-show="assignShow" @closeDialog="assignShow=false"/>
  </div>
</template>

<script>
import YmmContent from "@/components/common/ymm-content";
import YmmToolbar from "@/components/common/ymm-toolbar";
import YmmPagination from "@/components/common/ymm-pagination";
import UserTable from "@/views/system/user/user-table";
import UserDialog from "@/views/system/user/user-dialog";
import AssignDialog from "@/views/system/user/assign-dialog";
import {addUser, deleteUser, pageUsers, updateUser} from "@/api/system-user";

export default {
  data() {
    return {
      users: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      name: '',
      isShow: false,
      user: {},
      isAdd: true,
      assignShow: false,
      assignId: 0
    }
  },
  components: {YmmContent, YmmToolbar, UserTable, YmmPagination, UserDialog, AssignDialog},
  methods: {
    onAdd() {
      this.isShow = true
      this.isAdd = true
    },
    onInput(content) {
      this.name = content
      this.pageNum = 1
      this.getUsers()
    },
    getUsers() {
      pageUsers(this.pageNum, this.pageSize, this.name).then(res => {
        this.users = res.rows
        this.total = res.total
      }).catch(err => {
        this.$message.error('获取角色列表失败')
      })
    },
    onSize(size) {
      this.pageSize = size
      this.getUsers()
    },
    onNum(num) {
      this.pageNum = num
      this.getUsers()
    },
    onSubmit(user) {
      this.user = user
      if (this.isAdd) {
        addUser(this.user).then(res => {
          this.$message.success('添加成功')
          this.isShow = false
          this.getUsers()
        }).catch(err => {
        })
      } else {
        updateUser(this.user).then(res => {
          this.$message.success('修改成功')
          this.isShow = false
          this.getUsers()
        }).catch(err => {
        })
      }
    },
    onUpdate(user) {
      this.user = user
      this.isAdd = false
      this.isShow = true
    },
    onDelete(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(id).then(res => {
          this.$message.success('删除成功')
          this.getUsers()
        }).catch(err => {
          console.log(err)
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    onAssign(id) {
      this.assignShow = true
      this.assignId = id
    }
  },
  created() {
    this.getUsers()
  }
}
</script>

<style scoped>

</style>
